<template>
  <div class="confirm-order">
    <div class="order-container">
      <div class="order-header">
        <h1>{{ $t('pay.confirmOrder') }}</h1>
        <div class="progress-bar">
          <div class="step active">1. {{ $t('pay.cart') }}</div>
          <div class="step active">2. {{ $t('pay.confirmOrder') }}</div>
          <div class="step">3. {{ $t('pay.payment') }}</div>
        </div>
      </div>

      <div class="order-section">
        <h2 class="section-title">{{ $t('pay.selectShippingAddress') }}</h2>
        <user-shipping-address ref="userShipRef" @on-change="onSelectAddr"
          addressType="confirm"></user-shipping-address>
      </div>

      <div class="order-section">
        <div class="section-header">
          <h2 class="section-title">{{ $t('pay.confirmProductInformation') }}</h2>
          <router-link to="/user/shopping" class="edit-link">{{ $t('pay.backCartModification') }}</router-link>
        </div>

        <div class="product-list" v-for="item in dataList" :key="item.orderItemNo">
          <div class="shop-header">
            <h3>{{ item.shopName }}</h3>
          </div>

          <div class="product-table">
            <div class="table-header">
              <div class="header-item product-info">{{ $t('pay.commodityInformation') }}</div>
              <div class="header-item">{{ $t('pay.price') }}</div>
              <div class="header-item">{{ $t('pay.quantity') }}</div>
              <div class="header-item">{{ $t("wayBill.add_service") }}</div>
              <div class="header-item">{{ $t('pay.remark') }}</div>
              <div class="header-item">{{ $t('user.coupon') }}</div>
              <div class="header-item">{{ $t('user.all_amount') }}</div>
            </div>

            <div class="table-body" v-for="subItem in item.itemList" :key="subItem.id">
              <div class="product-info">
                <product-picture :image-list="[subItem.mainImg]"></product-picture>
                <div class="product-details">
                  <div class="product-name">{{ subItem.subject }}</div>
                  <div class="product-attributes" v-for="attributeItem in subItem.skuAttrEnumFormatList"
                    :key="attributeItem.id">
                    {{ attributeItem.name }}：{{ attributeItem.value }}
                  </div>
                </div>
              </div>
              <div class="price-col">
                {{ userCurrency.code }} {{ subItem.price }}
                <div class="edit-price" @click="editBtn(subItem)">
                  <span class="edit-icon">✏️</span>
                  <span>{{ $t('editPricePop.price_title') }}</span>
                </div>
              </div>
              <div class="quantity-col">x {{ subItem.quantity }}</div>
              <div class="service-col">
                <div class="service-option" @click="picBtn(subItem)">
                  {{ $t("custom.cus_name_pic") }}
                  <span class="tooltip-icon" :title="$t('custom.name_pic_tip')">?</span>
                </div>
                <div class="service-option" @click="vidBtn(subItem)">
                  {{ $t("custom.cus_name_vid") }}
                  <span class="tooltip-icon" :title="$t('custom.name_vid_tip')">?</span>
                </div>
              </div>
              <div class="remark-col">
                {{ subItem.remarks }}
                <span class="edit-icon" @click="onRmk(subItem)">✏️</span>
              </div>
              <div class="coupon-col">
                <div v-if="info.activityId" class="disabled-coupon">
                  {{ $t('personal.select_title') }}
                </div>
                <div v-else class="select-coupon" @click="toggle(subItem)">
                  {{ subItem.couponCustomerId ? $t('personal.has_selected') : $t('personal.select_title') }}
                </div>
              </div>
              <div class="total-col">
                <div class="subtotal">{{ userCurrency.code }} {{ subItem.price | bigTimes(subItem.quantity) }}</div>
                <div class="discount" v-if="subItem.discountAmount">
                  - {{ userCurrency.code }} {{ subItem.discountAmount }}
                </div>
                <div class="discount" v-if="info.discountFee">
                  - {{ userCurrency.code }} {{ info.discountFee }}
                </div>
              </div>

              <div class="custom-service" v-if="subItem.services && subItem.services.length > 0">
                <div class="service-tag">
                  <span>{{ $t('custom.cus_name_pic') }}</span>
                  <span>{{ subItem.services.length }}{{ $t('custom.ser_len_num') }}</span>
                  <span class="cancel-btn" @click="cancelPic(subItem)">{{ $t('pay.cancel') }}</span>
                  <span>{{ userInfo.currencySymbol }}{{ subItem.photoServicePrice }}</span>
                </div>
              </div>
              <div class="custom-service" v-if="subItem.videoServicesV1 && subItem.videoServicesV1.length > 0">
                <div class="service-tag">
                  <span>{{ $t('custom.cus_name_vid') }}</span>
                  <span>{{ subItem.videoServicesV1.length }}{{ $t('custom.ser_vid_num') }}</span>
                  <span class="cancel-btn" @click="cancelVid(subItem)">{{ $t('pay.cancel') }}</span>
                  <span>{{ userInfo.currencySymbol }}{{ subItem.videoServicePrice }}</span>
                </div>
              </div>
            </div>

            <div class="shop-summary">
              <div class="summary-item">
                <span>{{ $t('user.share_text') }} {{ item.itemList.length }} {{ $t('user.share_text_end') }}</span>
              </div>
              <div class="summary-item">
                <span>{{ $t('pay.grossCommodityPrice') }}:</span>
                <span class="amount">{{ userCurrency.code }} {{ compAmount(item) }}</span>
              </div>
              <div class="summary-item discount-item" v-if="compCouponDiscountAmount(item) > 0">
                <span>{{ $t('user.offers_tit') }}:</span>
                <span class="discount-amount">- {{ userCurrency.code }} {{ compCouponDiscountAmount(item) }}</span>
              </div>
              <div class="summary-item discount-item" v-if="info.discountFee">
                <span>{{ $t('user.offers_tit') }}:</span>
                <span class="discount-amount">- {{ userCurrency.code }} {{ info.discountFee }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="order-footer">
        <div class="agreements">
          <router-link
            v-for="(agreement, index) in [itemsAgreement, termsAgreement, exchangeAgreement, disclaimerAgreement]"
            :key="index" :to="`/notice/${agreement.id}`" target="_blank" class="agreement-link">
            {{ agreement.title }}
          </router-link>
        </div>

        <div class="order-notice">
          {{ $t('pay.orderSubmittedSuccessfully') }}
        </div>

        <div class="terms-agreement">
          <label>
            <input type="checkbox" v-model="checkboxValue">
            {{ $t('pay.iAgree') }}
          </label>
        </div>

        <div class="payment-summary">
          <div class="total-amount">
            <div class="amount-label">{{ $t('pay.totalPricePaid') }}</div>
            <div class="amount-value">
              {{ userCurrency.code }} {{ allPrice() }}
              <span class="tooltip-icon" :title="$t('customOrder.totalPrice')">?</span>
            </div>
            <div class="discount-note" v-if="allCouponAmount() > 0">
              {{ $t('submitParcel.alreadyDiscounted') }} {{ userCurrency.code }} {{ allCouponAmount() }}
            </div>
            <div class="discount-note" v-if="info.discountFee">
              {{ $t('submitParcel.alreadyDiscounted') }} {{ userCurrency.code }} {{ info.discountFee }}
            </div>
          </div>
          <button class="submit-btn" @click="onOrderSubmit" :disabled="loading">
            {{ loading ? $t('pay.processing') : $t('pay.submitOrder') }}
          </button>
        </div>
      </div>
    </div>

    <!-- 弹窗组件保持不变 -->
    <edit-desc ref="childRef" @customImg="customImg" @newRemarks="newRemarks" @updateMet="updateMet"></edit-desc>
    <t-edit-price ref="editRef" @changePrice="updateMet" :popPrice="popPrice"></t-edit-price>
    <custom-service-pop ref="customServiceRef" @confirmMet="confirmMet"></custom-service-pop>
    <confirm-cancel ref="confirmRef" :isType="isType" :cancelId="cancelId"
      @updateServiceMet="updateServiceMet"></confirm-cancel>
    <order-coupon-list ref="orderCouponRef" :couponDataList="couponDataList" couponType="ORDER"
      :userLanguage="userLanguage" :userInfo="userInfo" :userCurrency="userCurrency" @handleInfo="getCheapInfo"
      @uncheck="callOff"></order-coupon-list>
    <result-draw-pop ref="unJoinRef" @againEmit="againEmit"></result-draw-pop>
    <rules-pop-one ref="oneRef" @closeEmit="close" @confirmEmit="confirm"></rules-pop-one>
  </div>
</template>

<script>
import { confirmOrderList, myAvailableCouponList, submitV2, submitGroupV2 } from "@/api/order";
import { bigPlus, bigMinus, bigTimes } from "@/common/digital-computation";
import ProductPicture from "@/views/main/user/components/product-picture";
import { mapState } from "vuex";
import userShippingAddress from "@/views/main/submit-parcel/user-shipping-address";
import { debounce, validateAddressRequired, addressExamineRepetition } from "@/common/common";
import EditDesc from '../user/components/edit-desc.vue';
import { cartEdit } from "@/api/cart";
import TEditPrice from "@/components/t-edit-price";
import CustomServicePop from "@/views/main/pay/compontents/custom-service-pop.vue";
import ConfirmCancel from './compontents/confirm-cancel.vue';
import { editSer } from "@/api/order";
import { pointUser } from "@/common/point/api-hook";//打点日志
import OrderCouponList from './compontents/order-coupon-list.vue';
import resultDrawPop from "../activity/freeShipping/components/result-draw-pop.vue";
import RulesPopOne from '../user/components/rules-pop-one.vue';

export default {
  name: "index",
  components: { userShippingAddress, ProductPicture, EditDesc, TEditPrice, CustomServicePop, ConfirmCancel, OrderCouponList, resultDrawPop, RulesPopOne },
  data() {
    return {
      checkboxValue: true,
      loading: false, // loading
      appName: process.env.VUE_APP_NAME,
      dataList: [], // 商品列表
      orderEdit: [], // 编辑订单
      addressId: '', // 选择收货地址
      remarks: '',
      info: '',
      infoList: {},
      rowLength: 0,
      popPrice: 0,
      isType: 0,
      cancelId: '',
      selectCouponCustomerId: [],//已经选择的优惠券id数组
      couponDataList: [],
      activityCode: '',
      addressInfo: {}
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      userCurrency: (state) => state.user.userCurrency,
      itemsAgreement: (state) => {
        // 禁购商品说明
        let obj = '';
        if (state.config.config) {
          obj = state.config.config.articleMap.CFG_ARTICLE_PROHIBITED_ITEMS;
        }
        return obj;
      },
      disclaimerAgreement: (state) => {
        // 免责声明
        let obj = '';
        if (state.config.config) {
          obj = state.config.config.articleMap.CFG_ARTICLE_DISCLAIMER;
        }
        return obj;
      },
      termsAgreement: (state) => {
        // 服务条款和用户管理
        let obj = '';
        if (state.config.config) {
          obj = state.config.config.articleMap.CFG_ARTICLE_SERVICE_TERMS;
        }
        return obj;
      },
      exchangeAgreement: (state) => {
        // 退换货服务
        let obj = '';
        if (state.config.config) {
          obj = state.config.config.articleMap.CFG_ARTICLE_RETURN_EXCHANGE;
        }
        return obj;
      },
      userLanguage: (state) => state.user.userLanguage
    })
  },
  created() {
    this.getConfirmOrderList();
    if (this.$route.query.activityCode) {
      this.activityCode = this.$route.query.activityCode;
    }
  },
  methods: {
    comAddFee(info) {
      return bigPlus(info.serviceFee, info.additionalServiceFee)
    },
    cancelPic(item) {
      this.isType = 1;//取消定制照片
      this.cancelId = item.id;
      this.$refs.confirmRef.open();
    },
    cancelVid(item) {
      this.isType = 2;//取消定制视频
      this.cancelId = item.id;
      this.$refs.confirmRef.open();
    },
    picBtn(subItem) {
      this.$refs.customServiceRef.open(subItem);
    },
    vidBtn(subItem) {
      this.$refs.customServiceRef.open(subItem);
    },
    // 改价弹框
    editBtn(info) {
      this.$refs.editRef.open(info);
      if (info.manuaPrice) {
        this.popPrice = info.manuaPrice;
      } else if (info.originalPriceCNY) {
        this.popPrice = info.originalPriceCNY;
      }
    },
    editQuantity(info) {
      this.infoList = info;
      this.onCartEdit(this.infoList);
    },
    //定制化要求
    customImg(value) {
      this.infoList.imageRemarks = value;
    },
    updateServiceMet() {
      this.getConfirmOrderList();
      this.allPrice();
    },
    newRemarks(value) {
      this.infoList.remarks = value;
    },
    updateMet(e) {
      this.onCartEdit(e);
    },
    onSelectAddr(info) {
      // 选择的地址
      this.addressInfo = info;
      this.addressId = info.id;
    },
    onRmk(info) {
      this.infoList = info;
      // this.$refs.childRef.descPopup = true;
      this.$refs.childRef.open(info);
    },
    onCartEdit(info) {
      cartEdit({
        channel: info.channel,
        id: info.id, // 主键
        remarks: info.remarks,
        spuNo: info.spuNo, // SPU产品编号
        quantity: info.quantity, // 数量，必填
        skuNo: info.skuNo, // 系统商品编号/货号：系统唯一
        imageRemarks: info.imageRemarks,
        manuaAdjustRemark: info.manuaAdjustRemark,//改价备注
        manuaPrice: info.manuaPrice,//改价价格
        manuaAdjustImage: info.manuaAdjustImage//改价图片
      }).then((res) => {
        if (res.code == 200) {
          this.descPopup = false;
          this.getConfirmOrderList();
        }
      });
    },
    // 选择商品
    onSelectGoods(info) {
      // 处理要提交的数据id放在this.orderEdit数组里
      this.rowLength = info.itemList.length;
      info.itemList.forEach(subItem => {
        if (subItem.active) {
          if (!this.orderEdit.some(idItem => idItem.id === subItem.id)) {
            this.orderEdit.push({ id: subItem.id })
          }
        } else {
          this.orderEdit = this.orderEdit.filter(idItem => idItem.id !== subItem.id)
        }
      })
      // 是否全选
      for (const item of info.itemList) {
        if (!item.active) {
          info.allActive = false;
          break;
        } else {
          info.allActive = true;
        }
      }
    },
    // 全选
    onAll(info) {
      // 根据是否选中的状态处理数据
      if (info.allActive) {
        info.itemList.forEach(item => {
          item.active = true;
        })
      } else {
        info.itemList.forEach(item => {
          item.active = false;
        })
      }
      this.onSelectGoods(info);
    },
    totalPrice(info) {
      let t = bigTimes(info.price, info.quantity);
      return bigPlus(t, info.expressFee);
    },
    toggle(subItem) {
      let priceCost = bigTimes(subItem.price, subItem.quantity);
      this.$refs.orderCouponRef.loading = true;
      myAvailableCouponList({ currencyCode: this.userCurrency.code, orderType: 'ORDER', amount: priceCost }).then((res) => {
        if (this.selectCouponCustomerId.length > 0) {
          // 提取 this.selectCouponCustomerId 数组中所有的 couponCustomerId 值
          const usedCouponCustomerIds = this.selectCouponCustomerId.map(item => item.couponCustomerId);
          // 找到 selectCouponCustomerId 中 orderId 等于 subItem.id 的数据
          const matchedItem = this.selectCouponCustomerId.find(item => item.orderId === subItem.id);
          if (matchedItem && matchedItem.couponCustomerId) {
            // 过滤 usedCouponCustomerIds 数组，移除与 matchedItem.couponCustomerId 相同的值
            const filteredUsedCouponCustomerIds = usedCouponCustomerIds.filter(id => id !== matchedItem.couponCustomerId);
            // 过滤数据，排除处理后的 usedCouponCustomerIds 中的值
            this.couponDataList = (res.result || []).filter(item => {
              return !filteredUsedCouponCustomerIds.includes(item.couponCustomerId) && item.status != 'EXPIRED';
            });
            // 判断那条数据 id 的值在 couponDataList 中的索引
            const index = this.couponDataList.findIndex(item => item.couponCustomerId === matchedItem.couponCustomerId);
            if (index !== -1) {
              // 将找到的索引赋值给 this.active
              this.$refs.orderCouponRef.active = index;
            }
          } else {
            // 过滤掉所有已使用的 couponCustomerId 对应的数据
            this.couponDataList = (res.result || []).filter(item => {
              return !usedCouponCustomerIds.includes(item.couponCustomerId) && item.status != 'EXPIRED';
            });
            this.$refs.orderCouponRef.active = '';
          }
        } else {
          this.couponDataList = (res.result || []).filter(item => item.status != 'EXPIRED');
          console.log("shjfg", this.couponDataList);

        }
        this.$refs.orderCouponRef.open(subItem);
        this.$refs.orderCouponRef.loading = false;
      }).catch()
    },
    onOrderSubmit: debounce(function () {
      // 提交订单埋点
      if (this.$analytics) {
        this.$analytics.logEvent('createOrder');
      }

      if (this.checkboxValue != true) {
        this.$Message.error(this.$t('pay.pleaseAgreeTermsService'));
        return false;
      }

      // 地址必填校验
      if (!validateAddressRequired(this.addressInfo)) {
        this.$refs.oneRef.open(this.$t('user.no_data_pop_text'), this.$t('user.close'), this.$t('submitParcel.edit'), 2);
        return;
      }
      console.log(111);

      addressExamineRepetition(this.addressInfo, false, 'order').then(() => {
        console.log("通过");
        this.onConfirmOrder();
      }).catch((err) => {
        console.log("失败", err);

        let str = '';
        if (err.val) {
          str = this.$t(err.text, { val: err.val });
        } else {
          str = this.$t(err.text);
        }
        this.$refs.oneRef.open(str, this.$t('submitParcel.edit'), this.$t('user.submitOrder'));
      })
    }, 1000),
    onConfirmOrder() {
      const newArray = this.dataList.flatMap(item =>
        item.itemList.map(subItem => ({
          id: subItem.id,
          couponCustomerId: subItem.couponCustomerId
        }))
      );

      this.loading = true;
      if (this.info.activityId) {
        this.createGroupOrder(newArray);//拼团下单接口
      } else {
        this.createUserOrder(newArray);//用户默认下单接口
      }
    },
    createUserOrder(newArray) {
      // 用户确认下单接口
      submitV2({
        addressId: this.addressId, // 国家
        cartItems: newArray,
        inviteCode: sessionStorage.getItem('INVITE_CODE')
      }).then((res) => {
        pointUser('actions', '2009');
        this.$router.push(`/pay?id=${res.result}&&markText=indent`);
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      })
    },
    createGroupOrder(newArray) {
      submitGroupV2({
        activityCode: this.activityCode || '',
        activityId: this.info.activityId,
        addressId: this.addressId, // 国家
        cartItems: newArray,
        inviteCode: sessionStorage.getItem('INVITE_CODE')
      }).then((res) => {
        if (res.result.errorType) {
          this.$refs.unJoinRef.open({ type: res.result.errorType, text: res.result.eachOrderLimit })
        } else {
          this.$router.push(`/pay?id=${res.result.orderNo}&&markText=indent`);
          this.loading = false;
        }
      }).catch(() => {
        this.loading = false;
      })
    },
    getConfirmOrderList() {
      // 用户获取确认订单数据接口
      confirmOrderList(this.$route.query.id).then((res) => {
        res.result.shopCartList.forEach(item => {
          item.allActive = false;//是否全选
          item.itemList.forEach(listItem => {
            listItem.active = false;//单个商品选中状态
          })
        })
        this.dataList = res.result.shopCartList;
        this.info = res.result;
      })
    },
    // 提交编辑定制服务
    confirmMet(val) {
      delete val.orderItemId;//val.orderItemId是追加用到的，所以要去除掉
      // 为空的不传
      if (val.services && val.services.length > 0) {
        val.services = val.services.filter(service => service.imageUrl !== "" || service.serviceRemark !== "");
      }
      // 定制服务编辑
      editSer(val).then((res) => {
        if (res.code === 200) {
          this.$refs.customServiceRef.close();
          this.getConfirmOrderList();
        }
      })
    },
    // 选择优惠券
    getCheapInfo(id, info) {
      const newItem = {
        orderId: id,
        couponCustomerId: info.couponCustomerId
      };
      // 查找数组中是否已存在相同 orderId 的对象
      const existingIndex = this.selectCouponCustomerId.findIndex(item => item.orderId === id);
      if (existingIndex !== -1) {
        // 如果存在相同 orderId 的对象，则替换该对象
        this.selectCouponCustomerId.splice(existingIndex, 1, newItem);
      } else {
        // 如果不存在，则添加新对象到数组中
        this.selectCouponCustomerId.push(newItem);
      }

      for (const outerItem of this.dataList) {
        for (const targetOrder of outerItem.itemList) {
          if (targetOrder.id === id) {
            // 使用 this.$set 添加响应式属性
            this.$set(targetOrder, 'discountAmount', info.discountAmount ? info.discountAmount : '');
            this.$set(targetOrder, 'couponCustomerId', info.couponCustomerId ? info.couponCustomerId : '');
            return;
          }
        }
      }
    },
    // 取消选择优惠券
    callOff(id, info) {
      if (info) {
        // 取消选择优惠券，将那条数据的优惠券id置空
        const index = this.selectCouponCustomerId.findIndex(item => item.orderId === id);
        if (index !== -1) {
          // this.selectCouponCustomerId[index].couponCustomerId = '';
          // 如果找到了匹配的元素，使用 splice 方法将其从数组中删除
          this.selectCouponCustomerId.splice(index, 1);
        }
      }

      for (const outerItem of this.dataList) {
        for (const targetOrder of outerItem.itemList) {
          if (targetOrder.id === id) {
            // 使用 this.$set 添加响应式属性
            this.$set(targetOrder, 'discountAmount', '');
            this.$set(targetOrder, 'couponCustomerId', '');
            return;
          }
        }
      }
    },
    // 店铺维度的商品总价
    compAmount(item) {
      let allAmount = 0;
      for (const v of item.itemList) {
        let subTotal = bigTimes(v.price, v.quantity);
        let addCusTotal = bigPlus(subTotal, v.photoServicePrice || 0);
        if (v.discountAmount != undefined && v.discountAmount != '') {
          addCusTotal = bigMinus(addCusTotal, v.discountAmount);
        }
        allAmount = bigPlus(allAmount, addCusTotal);
      }
      return allAmount;
    },
    // 店铺维度的优惠金额合计
    compCouponDiscountAmount(item) {
      let allCouponDiscountAmount = 0;
      for (const v of item.itemList) {
        if (v.discountAmount != undefined && v.discountAmount != '') {
          allCouponDiscountAmount = bigPlus(allCouponDiscountAmount, v.discountAmount);
        }
      }
      return allCouponDiscountAmount;
    },
    // 待支付总价=商品总价-总优惠金额（所有店铺的优惠金额总和）
    allPrice() {
      let totalDiscount = 0;
      let hasDiscountAmount = false;
      // 遍历外层数组
      for (let i = 0; i < this.dataList.length; i++) {
        const shop = this.dataList[i];
        // 遍历每个店铺的商品列表
        for (let j = 0; j < shop.itemList.length; j++) {
          const item = shop.itemList[j];
          if (item.discountAmount != undefined && item.discountAmount != '') {
            hasDiscountAmount = true;//是否使用优惠券
            totalDiscount = bigPlus(totalDiscount, item.discountAmount);
          }
        }
      }
      //有使用优惠券 
      if (hasDiscountAmount) {
        return bigMinus(this.info.totalFee, totalDiscount);
      }
      return this.info.totalFee;
    },
    // 总优惠金额
    allCouponAmount() {
      let totalDiscount = 0;
      // 遍历外层数组
      for (let i = 0; i < this.dataList.length; i++) {
        const shop = this.dataList[i];
        // 遍历每个店铺的商品列表
        for (let j = 0; j < shop.itemList.length; j++) {
          const item = shop.itemList[j];
          if (item.discountAmount != undefined && item.discountAmount != '') {
            totalDiscount = bigPlus(totalDiscount, item.discountAmount);
          }
        }
      }
      return totalDiscount;
    },
    //重新开团
    againEmit() {
      let url = `${window.location.origin}/product/${this.dataList[0].channel}/${this.dataList[0].itemList[0].spuNo}`;
      window.location.href = url;
    },
    // 关闭 其他无操作，仅关闭
    confirm(e, v) {
      if (e == 1) {
        setTimeout(() => {
          this.onConfirmOrder();
        }, 1000)
      } else {
        this.$refs.userShipRef.editAddress(this.addressInfo);
      }
    },
    close(e, v) {
      if (e == 1) {
        this.$refs.userShipRef.editAddress(this.addressInfo);
      }
    }
  }
}
</script>

<style scoped lang="less">
.confirm-order {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;

  .order-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 25px;
  }

  .order-header {
    margin-bottom: 30px;
    text-align: center;

    h1 {
      font-size: 24px;
      color: #2c3e50;
      margin-bottom: 20px;
    }

    .progress-bar {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;

      .step {
        padding: 8px 20px;
        margin: 0 10px;
        border-radius: 20px;
        background: #f5f5f5;
        color: #999;
        font-size: 14px;

        &.active {
          background: #3498db;
          color: white;
        }
      }
    }
  }

  .order-section {
    margin-bottom: 30px;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 20px;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .section-title {
      font-size: 18px;
      color: #2c3e50;
      margin: 0;
    }

    .edit-link {
      color: #3498db;
      text-decoration: none;
      font-size: 14px;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .product-list {
    margin-bottom: 30px;

    .shop-header {
      background: #f8f9fa;
      padding: 12px 15px;
      border-radius: 4px;
      margin-bottom: 15px;

      h3 {
        margin: 0;
        font-size: 16px;
        color: #2c3e50;
      }
    }

    .product-table {
      width: 100%;
      border-collapse: collapse;

      .table-header {
        display: flex;
        background: #f8f9fa;
        padding: 12px 0;
        border-radius: 4px;
        margin-bottom: 10px;
        font-weight: bold;
        font-size: 14px;
        color: #555;

        .header-item {
          flex: 1;
          text-align: center;
          padding: 0 5px;

          &.product-info {
            flex: 3;
            text-align: left;
            padding-left: 15px;
          }
        }
      }

      .table-body {
        display: flex;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
        align-items: center;

        >div {
          flex: 1;
          padding: 0 5px;
          text-align: center;
          font-size: 14px;
        }

        .product-info {
          flex: 3;
          display: flex;
          text-align: left;
          align-items: center;

          .product-picture {
            width: 60px;
            height: 60px;
            margin-right: 15px;
            border-radius: 4px;
            overflow: hidden;
          }

          .product-details {
            .product-name {
              font-weight: 500;
              margin-bottom: 5px;
              color: #2c3e50;
            }

            .product-attributes {
              color: #777;
              font-size: 13px;
              margin-bottom: 3px;
            }
          }
        }

        .edit-price,
        .edit-icon {
          color: #3498db;
          cursor: pointer;
          font-size: 13px;
          margin-top: 5px;

          &:hover {
            text-decoration: underline;
          }
        }

        .service-col {
          .service-option {
            color: #e74c3c;
            cursor: pointer;
            margin: 3px 0;
            font-size: 13px;

            .tooltip-icon {
              display: inline-block;
              width: 16px;
              height: 16px;
              line-height: 16px;
              text-align: center;
              background: #ddd;
              color: #666;
              border-radius: 50%;
              font-size: 12px;
              margin-left: 3px;
            }
          }
        }

        .coupon-col {
          .select-coupon {
            color: #e74c3c;
            border: 1px solid #e74c3c;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            display: inline-block;

            &:hover {
              background: #fef0f0;
            }
          }

          .disabled-coupon {
            color: #999;
            border: 1px solid #ddd;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 13px;
            display: inline-block;
            background: #f5f5f5;
          }
        }

        .total-col {
          font-weight: bold;

          .subtotal {
            color: #2c3e50;
          }

          .discount {
            color: #e74c3c;
            font-size: 13px;
            margin-top: 3px;
          }
        }

        .custom-service {
          flex: 100%;
          margin-top: 10px;
          padding-top: 10px;
          border-top: 1px dashed #eee;

          .service-tag {
            background: #f8f9fa;
            padding: 8px 15px;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            font-size: 13px;

            span {
              margin: 0 8px;
            }

            .cancel-btn {
              color: #e74c3c;
              cursor: pointer;

              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }

    .shop-summary {
      text-align: right;
      padding: 15px;
      background: #f8f9fa;
      border-radius: 4px;
      margin-top: 15px;

      .summary-item {
        margin-bottom: 8px;
        font-size: 14px;

        .amount {
          font-weight: bold;
          margin-left: 15px;
          min-width: 100px;
          display: inline-block;
          text-align: right;
        }

        &.discount-item {
          color: #e74c3c;

          .discount-amount {
            margin-left: 15px;
            min-width: 100px;
            display: inline-block;
            text-align: right;
          }
        }
      }
    }
  }

  .order-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;

    .agreements {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 20px;

      .agreement-link {
        color: #3498db;
        text-decoration: none;
        margin: 0 10px 10px;
        font-size: 13px;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .order-notice {
      background: #f0f7ff;
      color: #3498db;
      padding: 10px 15px;
      border-radius: 4px;
      text-align: center;
      margin-bottom: 15px;
      font-size: 14px;
    }

    .terms-agreement {
      text-align: center;
      margin-bottom: 20px;
      font-size: 14px;

      input {
        margin-right: 5px;
      }
    }

    .payment-summary {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .total-amount {
        text-align: right;
        margin-right: 30px;

        .amount-label {
          font-size: 14px;
          color: #777;
          margin-bottom: 5px;
        }

        .amount-value {
          font-size: 24px;
          font-weight: bold;
          color: #e74c3c;

          .tooltip-icon {
            display: inline-block;
            width: 18px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            background: #ddd;
            color: #666;
            border-radius: 50%;
            font-size: 12px;
            margin-left: 5px;
          }
        }

        .discount-note {
          font-size: 13px;
          color: #e74c3c;
          margin-top: 3px;
        }
      }

      .submit-btn {
        background: #e74c3c;
        color: white;
        border: none;
        padding: 12px 30px;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: #c0392b;
        }

        &:disabled {
          background: #ccc;
          cursor: not-allowed;
        }
      }
    }
  }
}
</style>